import React from "react";
import { Card,List, TextareaItem, ImagePicker, WingBlank, Button, WhiteSpace } from 'antd-mobile';
import { createForm } from 'rc-form';

const data = [];

class TextareaItemExample extends React.Component {
    state = {
        files: data,
        multiple: false,
      }
      onChange = (files, type, index) => {
        console.log(files, type, index);
        this.setState({
          files,
        });
      }
      onSegChange = (e) => {
        const index = e.nativeEvent.selectedSegmentIndex;
        this.setState({
          multiple: index === 1,
        });
      }
    render() {
      const { getFieldProps } = this.props.form;
      const { files } = this.state;
    return (
      <div>
           <style jsx="true">{`
            body,html{
                font-size:62.5%;
            }
            i{
                font-style: normal;
                color: #000;
                margin-left:5px;
            }
            .fault-title{
               font-weight:bold; 
            }
            .data-content{
                border-bottom: 1px solid #ccc;
            }
            .data-content>p>span:first-child{
                display:inline-block;
                width:22%;
                font-size:1.4rem;
            }
            .data-content>p>span:last-child{
                display:inline-block;
                width:78%;
                font-size:1.4rem;
                color:#888;
            }
            .methods{
                font-size:1.6rem;
                color:#000;
            }
            .methods>i{
                color:red;
                margin-right:0.2rem;
            }
            .deal-with>span{
                display: inline-block;
                width: 7rem;
                text-align: center;
                border: 1px solid #ccc;
                padding: 0.5rem;
                border-radius: 0.5rem;
                margin-right: 0.5rem;
                color: #555;
            }
            .am-list-header {
                font-size: 1.6rem;
                color: #000;
            }
            .am-textarea-control textarea {
                color: #888;
                font-size: 1.4rem;
            }
            .img-title{
                padding-left: 1rem;
                font-size: 1.6rem;
            }
            .am-button {
                width: 80%;
                margin: auto;
                border-radius: 2rem;
            }
        `}</style>
        <Card className="car-right">
            <Card.Body >
                <div className="data-content">
                    <p className="fault-title">故障信息</p>
                    <p><span>设备名称</span><span>西走道#配电柜</span></p>
                    <p><span>漏电值</span><span>3.5mA</span></p>
                    <p><span>故障起因</span><span>漏电异常</span></p>
                    <p><span>报警时间</span><span>2018-11-290101 13</span></p>
                    <p><span>设备地址</span><span>深圳市南山区消检通大厦1105西走道</span></p>
                </div>
            </Card.Body>
            <Card.Footer content={<div>
                <p className="methods"><i>*</i>处理方法</p>
                <p className="deal-with"><span>已处理</span><span>已忽略</span></p>
            </div>} />
        </Card>
        <List renderHeader={() => '处理意见'}>
          <TextareaItem
            {...getFieldProps('处理意见', {
              initialValue: '请填写处理意见...',
            })}
            rows={5}
            count={50}
          />
        </List>
        <WingBlank>
        <p className="img-title">现场图片</p>
        <ImagePicker
          files={files}
          onChange={this.onChange}
          onImageClick={(index, fs) => console.log(index, fs)}
          selectable={files.length < 7}
          multiple={this.state.multiple}
        />
        </WingBlank>
        <Button className="submit" type="warning">确定</Button><WhiteSpace />
      </div>
    );
  }
}

const TextareaItemExampleWrapper = createForm()(TextareaItemExample);
 export default TextareaItemExampleWrapper;